<template>
	<view>
		<u-top-tips ref="uTips"></u-top-tips>
		<u-form style="background-color: #FFFFFF;padding: 20rpx;" :model="club" :rules="rules" ref="uForm"
			:errorType="errorType">
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="社团名称" prop="title">
				<u-input :border="border" placeholder="请输入社团名称" v-model="club.clubname" type="text"></u-input>
			</u-form-item>
			<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="180"
				label-position="left" label="社团简介" prop="subTitle">
				<u-input :border="border" placeholder="请输入社团简介" v-model="club.detail" type="textarea"></u-input>
			</u-form-item>
			<u-form-item label-position="left" label="上传封面" prop="logo"
				label-width="180">
				<u-upload ref="uUpload" :custom-btn="false" :show-upload-list="true"
					:auto-upload="false" :show-progress="true" :deletable="true" :max-count="1"
					@on-list-change="onListChange">
				</u-upload>
			</u-form-item>
			<u-button
				style="font-size: 24rpx;letter-spacing:10rpx;height: 80rpx;line-height: 80rpx;font-size: 32rpx;font-weight: 900;margin-top: 30rpx;"
				:loading="registerLoading"
				@click="submit" shape="square" size="default" :ripple="true" type="success">
				提交
			</u-button>
		</u-form>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		computed: mapState(['isLogin', 'loginUserInfo']),
		data() {
			return {
				club:{
					clubname:"",
					logo:"",
					detail:"",
				},
				registerLoading:false,
				border: false,
				labelPosition: 'left',
				errorType: ['message'],
				rules: {
					clubname: [{
							required: true,
							message: '请输入社团名称',
							trigger: 'blur',
						},
						{
							min: 5,
							message: '社团名称不能少于5个字',
							trigger: 'change',
						},
					],
					detail: [{
							required: true,
							message: '请输入社团简介',
							trigger: 'blur',
						},
						{
							min: 5,
							message: '社团简介不能少于5个字',
							trigger: 'change',
						}
					],
				},
				lists: [],
			}
		},
		onLoad() {
			
		},
		methods: {
			submit() {
				this.registerLoading = true
				//新增
				uni.uploadFile({
					url: this.url.file.upload, //仅为示例，非真实的接口地址
					method: 'POST',
					filePath: this.lists[0].url,
					name: 'file',
					success: (res) => {
						console.log(res)
						var data = JSON.parse(res.data);
						if(data.msg == "success"&& data.url!=null) {
							this.club.logo = data.url
							this.registerClub(this.club);
						}
					},
					fail: (res) => {
						this.registerLoading = false
						console.log(res)
					}
				});
			},
			registerClub(club){
				uni.request({
					url: this.url.club.registerAClub+"/"+this.loginUserInfo.id,
					method: 'POST',
					data: JSON.stringify(club),
					header: {
						"content-type": "application/json;charset=UTF-8"
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {
							this.close();
							this.registerLoading = false
						}
						this.registerLoading = false
					},
					fail: (res) => {
						this.registerLoading = false
						console.log("失败！")
					}
				});
			},
			close() {
				uni.navigateBack({
				    delta: 1
				});
			},
			//选择图片
			onListChange(lists) {
				this.lists = lists;
				console.log("进入集合")
				console.log(this.lists)
			}
		}
	}
</script>

<style>

</style>
